<template>
	<cl-crud :ref="setRefs('crud')" @load="onLoad">
		<el-row type="flex" align="middle">
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn />
			<cl-export-btn :columns="table.columns" />
			<cl-flex1 />
			<!-- 关键字搜索 -->
			<cl-search-key placeholder="小节主题、机械原理、程序设计、造型，支持模糊查询" />
			<!-- <columnbtn :table = "table"></columnbtn> -->
		</el-row>

		<el-row>
			<cl-filter label="课程类型">
				<el-select size="mini" v-model="form.course_type" @change="searchSubmitCourseType" style="width: 20px">
					<el-option :key="all" :value="null" label="全部"></el-option>
					<el-option v-for="item in course_type" :key="item.value" :value="item.value" :label="item.label"></el-option>
				</el-select>
			</cl-filter>
			<cl-filter label="课程等级">
				<el-select size="mini" v-model="form.level" @change="searchSubmit" style="width: 20px">
					<el-option :key="all" :value="null" label="全部"></el-option>
					<el-option v-for="item in course_level_list" :key="item.value" :value="item.value" :label="item.label">
					</el-option>
				</el-select>
			</cl-filter>
			<cl-filter label="课程大主题">
				<el-select size="mini" filterable v-model="form.phase_name" @change="searchSubmit" style="width: 100%">
					<el-option :key="all" :value="null" label="全部"></el-option>
					<el-option v-for="item in course_phase_list" :key="item.value" :value="parseInt(item.value)"
						:label="item.name">
						<span style="float: left">{{ item.name }}</span>
						<span style="
								float: right;
								color: var(--el-text-color-secondary);
								font-size: 13px;
							">{{ item.course_type }}</span>
					</el-option>
				</el-select>
			</cl-filter>
			<cl-filter label="是否启用">
				<el-select size="mini" v-model="form.isUse" @change="searchSubmit" style="width: 20px">
					<el-option :key="all" :value="null" label="全部"></el-option>
					<el-option :key="true" :value="true" label="启用"></el-option>
					<el-option :key="false" :value="false" label="未启用"></el-option>
				</el-select>
			</cl-filter>
			<cl-flex1 />
			<el-button size="mini" type="success" @click="resetSerach">重置</el-button>
		</el-row>

		<el-row>
			<!-- 数据表格 -->
			<cl-table :ref="setRefs('table')" @row-click="onRowClick" @expand-change="handledetail" v-bind="table">
				<!-- <template #column-program_design="{ scope }">
					<el-tag size="mini" v-for="item in handleLineSplite(scope.row.program_design)" :key="item">{{
							// item.split(",").join("/")
							item
					}}</el-tag>
				</template> -->
				<template #column-lable="{ scope }">
					
					<el-descriptions :column="1" size="large" border>
						<!-- {{scope.row}} -->
						<el-descriptions-item label-align="right" :v-if="item.required" :label="handleLabelRequied(item)" v-for="item in course_function_list">
							<!-- {{scope.row[item.value]}} -->
							<el-rate v-model="scope.row[item.value]" v-if="item.value === 'programming_level' || item.value === 'construct_level'" disabled></el-rate>
							<el-link type="primary" v-else-if="item.value === 'file'" :underline="false" v-for="(file,fileIndex) in fileStr(scope.row.file)" :href="file" target="_blank">
							<el-tag :type="['danger','info','warning','success'][Math.floor(Math.random()*3)]" style="margin-right: 15px;" size="normal"  effect="dark">{{splitFileName(file)}}</el-tag>
							
							</el-link>
							
							<!-- <el-rate v-model="scope.row[item.value]"  disabled></el-rate> -->
							<el-tag :type="['danger','info','warning','success'][Math.floor(Math.random()*3)]" size="default" v-else  effect="dark" v-for="item1 in handleLineSplite(scope.row[item.value])">{{
									item1
							}}</el-tag>

						</el-descriptions-item>
						<!-- <el-descriptions-item v-if="handleLabelSys(scope.row,'program_design')"  label-class-name="descriptions_label"  label-align="right" label="程序设计">
							<el-tag type="danger" size="mini" effect="dark"
								v-for="item in handleLineSplite(scope.row.program_design)">{{ item }}</el-tag>
						</el-descriptions-item>
						<el-descriptions-item label-align="right" label="机械原理">
							<el-tag type="danger" size="mini" effect="dark" v-for="item in handleLineSplite(scope.row.mechanical)">{{
									item
							}}</el-tag>

						</el-descriptions-item>
						<el-descriptions-item label-align="right" label="课程造型">
							<el-tag type="danger" size="mini" effect="dark" v-for="item in handleLineSplite(scope.row.course_shape)">{{
									item
							}}</el-tag>

						</el-descriptions-item> -->
					</el-descriptions>


				</template>
				<template #column-content_integrity="{ scope }">{{ handleContentIntegrity(scope.row)}}</template>
				
				<template #column-mechanical="{ scope }">
					<el-tag size="mini" v-for="item in handleLineSplite(scope.row.mechanical)" :key="item">{{
							item.split(",").join("/")
					}}</el-tag>
				</template>
				<template #column-phase_name="{ scope }">
					<div v-for="item in course_phase_list" :key="item.value">
						<el-tag type="success" v-if="item.value === scope.row.phase_name" size="mini">{{ item.label }}</el-tag>
					</div>
				</template>

				<template #column-course_shape="{ scope }">
					<el-tag size="mini" v-for="item in handleLineSplite(scope.row.course_shape)" :key="item">{{
							item.split(",").join("/")
					}}</el-tag>
				</template>
				<template #column-file="{ scope }">
					<el-link size="mini" v-for="(value, key) in fileStr(scope.row.file)" :key="value" :href="value"
						target="_blank">文件{{ key + 1 }}</el-link>
					<!-- <a v-for="(value, key) in fileStr(scope.row.file)"
						:key="value" :href="value">文件{{ key + 1 }}</a><br /> -->
				</template>
			</cl-table>
		</el-row>

		<el-row type="flex">
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</el-row>

		<!-- 新增、编辑 -->
		<cl-upsert :ref="setRefs('upsert')" v-bind="upsert" @opened="onUpsertOpen">
			<template #slot-file="{ scope }">
				<cl-upload name="file" type="text" :multiple="true" accept="*" :showButton="true" listType="text" limitSize="50"
					:showFileList="true" :data="{ name: 'name' }" :file-list="splitUrl(scope.file)" />
				<!-- {{splitUrl(scope.file)}}
				<div v-for="item in splitUrl(scope.file)" :key="item">
					<a :href="item">{{ findFileName(item) }}</a>
					<a target="_black" style="margin-left: 20px" :href="aaa(item)">预览</a>
				</div> -->
			</template>
		</cl-upsert>
	</cl-crud>
</template>

<script lang="ts">
import { computed, defineComponent, inject, onMounted, reactive, ref } from "vue";
import { CrudLoad, Upsert, Table } from "cl-admin-crud-vue3/types";
import { useRefs } from "/@/core";
import { basename } from "/@/core/utils";
import columnbtn from '../../components/setColumnBtn.vue'

export default defineComponent({
	components: {
		columnbtn
	},
	setup() {
		const { refs, setRefs } = useRefs();
		// 请求服务
		const service = inject<any>("service");

		const fileStr = computed(() => {
			return function (scope: string) {
				if (scope) {
					return scope.split(",");
				}
			};
		});

		const splitFileName = computed(() => {
			return function (url: string) {
				if (url) {
					return url.slice(url.lastIndexOf("/")+1,)
				}
				return null
			};
		});

		const restaurants = ref([])

		const createFilter = (queryString) => {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    };

		const querySearch = (queryString: string, cb: any) => {
      const results = queryString
        ? restaurants.value.filter(createFilter(queryString))
        : restaurants.value
      // call callback function to return suggestions
      cb(results)
    }

		// 根据课程类型获取到最新的10条课程记录
    const getCourseSourceByCourseType = async function(course_type: any){
      restaurants.value = []
      const res = await service.courseSourceService.page({page:1,size:5,course_type:course_type})
      console.log(res,"st------------");
      res.list.forEach(element => {
        restaurants.value.push({value:element.section_theme,label:element.section_theme})
      });
    }

		// 自定义筛选
		const form = ref({
			course_type: null,
			level: null,
			isUse: true,
			phase_name: null
		});

		// 筛选按钮提交
		const searchSubmitCourseType = function (e: any) {
			form.value.phase_name = null
			getCourseSystem()
			refs.value.crud.refresh({ ...form.value });
		};
		// 筛选按钮提交
		const searchSubmit = function (e: any) {
			refs.value.crud.refresh({ ...form.value });
		};

		// 分割文字方法
		const handleStrSplite = computed(() => {
			return function (str: string) {
				if (str) {
					return str.split(",");
				}
				return "";
			};
		});
		// 分割|方法
		const handleLineSplite = computed(() => {
			return function (str: string) {
				if (str) {
					console.log(typeof(str),"//////");
					
					if (typeof(str) === "string"){
						if (str.indexOf("|") !== -1){
							return str.split("|"); 
						}else{
							return [str]
						}
					}else{
						return [str]
					}
				}
				return [];
			};
		});

		// 重置筛选条件

		const resetSerach = function () {
			form.value = {
				course_type: null,
				level: null,
				isUse: null,
				phase_name: null
			};
			refs.value.crud.refresh({ ...form.value });
		};

		// 定义课程难度
		const course_level_list = ref([]);

		// 获取课程难度
		const getCourseLevel = async function () {
			const res = await service.base.system.param.list({ keyName: "courseLevel" });
			// 将json字符串转换为json对象
			let classLevel = eval("(" + res[0].data + ")");
			classLevel.forEach((item: { value: any; label: any; }) => {
				course_level_list.value.push({
					value: item.value,
					label: item.label,
					type: "info"
				});
			});
		};

		// 定义幼儿五大主题
		const child_five_theme_list = ref([]);

		// 获取幼儿五大主题
		const getChildFiveTheme = async function () {
			const res = await service.base.system.param.list({ keyName: "childFiveTheme" });
			// 将json字符串转换为json对象
			let classLevel = eval("(" + res[0].data + ")");
			classLevel.forEach((item: { value: string; label: any; }) => {
				child_five_theme_list.value.push({
					value: "" + item.value,
					label: item.label,
					type: "success"
				});
			});
		};

		// 定义课程用时
		const course_timer_list = ref([]);

		// 获取课程用时
		const getCourseTimer = async function () {
			const res = await service.base.system.param.list({ keyName: "courseTimer" });
			// 将json字符串转换为json对象
			let classLevel = eval("(" + res[0].data + ")");
			classLevel.forEach((item: { value: string; label: any; }) => {
				course_timer_list.value.push({
					value: "" + item.value,
					label: item.label,
					type: "success"
				});
			});
		};

		// 定义课程类型列表
		const course_type = ref([]);
		// 获取课程类型
		const getCourseType = async function () {
			const res = await service.courseTypeService.list();
			res.forEach((item: { id: any; course_id: any; }, index: any) => {
				course_type.value.push({
					value: item.id,
					label: item.course_id,
					type: "warning"
				});
			});
		};

		// 定义课程体系的列表
		const course_system_list = ref([]);

		// 定义课程阶段列表
		const course_phase_list = ref([]);
		// 通过接口获取数据

		const getCourseSystem = async function () {
			console.log(refs.value.upsert.form.course_type);
			course_phase_list.value.length = 0;
			console.log(course_phase_list.value);
			course_system_list.value = await service.courseSystemService.list({ course_type: form.value.course_type });
			// course_system_list.value = await service.courseSystemService.list({course_type:refs.value.upsert.form.course_type})
			console.log(course_system_list.value);

			course_system_list.value.forEach((item) => {
				course_phase_list.value.push({
					value: item.id,
					label: item.sort + ":" + item.phase_name,
					name: item.phase_name,
					course_type: item.course_id
				});
			});
		};

		onMounted(async () => {
			// 获取课程难度
			getCourseLevel();
			// 获取幼儿五大主题
			getChildFiveTheme();
			// 获取课程用时
			getCourseTimer();
			// 获取课程类型
			getCourseType();
			// 获取课程体系列表
			await getCourseSystem();
			// await getCourseFunction()
		});

		const updateCourseType = async ()=>{
				await getCourseFunction(refs.value.upsert.form.course_type)
				console.log(refs.value,"//////////////");
				

				if (refs.value.construct_level){
					refs.value.construct_level.$attrs.rules.required = handleFormRules("construct_level")
				}
				if (refs.value.programming_level){
					refs.value.programming_level.$attrs.rules.required = handleFormRules("programming_level")
				}
				if (refs.value.science_goals){
					refs.value.science_goals.$attrs.rules.required = handleFormRules("science_goals")
				}
				if (refs.value.programming_goals){
					refs.value.programming_goals.$attrs.rules.required = handleFormRules("programming_goals")
				}
				if (refs.value.emotional_goal){
					refs.value.emotional_goal.$attrs.rules.required = handleFormRules("emotional_goal")
				}
				if (refs.value.engineering_design_goals){
					refs.value.engineering_design_goals.$attrs.rules.required = handleFormRules("engineering_design_goals")
				}
				if (refs.value.content_label){
					refs.value.content_label.$attrs.rules.required = handleFormRules("content_label")
				}
				if (refs.value.mechanical){
					refs.value.mechanical.$attrs.rules.required = handleFormRules("mechanical")
				}
				if (refs.value.program_design){
					refs.value.program_design.$attrs.rules.required = handleFormRules("program_design")
				}
				if (refs.value.course_shape){
					refs.value.course_shape.$attrs.rules.required = handleFormRules("course_shape")
				}
				if (refs.value.child_five_theme){
					refs.value.child_five_theme.$attrs.rules.required = handleFormRules("child_five_theme")
				}
				if (refs.value.file){
					refs.value.file.$attrs.rules.required = handleFormRules("file")
				}
		}

		const onUpsertOpen = async function (data: any, { submit, done, close }: any) {
			// console.log(refs.value.upsert.form.course_type,"_________");
			// if (data){
			await updateCourseType()
			// await updateCourseType

			refs.value.phaseName.getSys(refs.value.upsert.form.course_type);
			
			
			// }
		};

		let course_function_list = ref([])
		// 获取课程类型的启用功能

		const getCourseFunction = async function(id: any){
			course_function_list.value = []
			const res = await service.courseTypeService.info({id:id})
			let course_function = res.course_function
			if (course_function !== ""){
				course_function_list.value =  eval("(" + course_function + ")")
			}

			// console.log(course_function_list.value,"~~~~~~~~~~~~~~~~~~");
			// let course_function = eval("(" + res.course_function + ")")
			// console.log(course_function,"~~~~~~~~~~~~~~~~~~");
			
			// let course_function = res.course_function
			// if (course_function !== ""){
			// 	course_function_list.value = course_function.split(",")
			// }
			// console.log(course_function_list.value,"1111111");

		}

		const findFileName = computed(() => {
			return function (info: string) {
				if (info) {
					if (info.lastIndexOf("/") !== -1) {
						return info.substring(info.lastIndexOf("/") + 1, info.length);
					}
					return "";
				}
				return "";
			};
		});

		const aaa = computed(() => {
			return function (info: string | string[]) {
				if (info) {
					if (info.indexOf(":") !== -1) {
						if (info[info.indexOf(":") - 1] === "s") {
							return "http://ow365.cn/?i=28375&ssl=1&furl=" + info;
						} else {
							return "http://ow365.cn/?i=28376&furl=" + info;
						}
					}
				}
			};
		});

		// 列设置
		const handleColumn = function () {

			table.columns.push(
				{
					prop: "section_theme",
					label: "小节主题",
				}
			)

		}

		

		// 处理内容完整度
		const handleContentIntegrity = computed(() => {
			return function (obj:object) {
				console.log(obj.course_type);
				
				// getCourseFunction(obj.course_type)
				// course_function_list.value.find(item => item.value == "construct_level") === undefined
				return "10%"
				
			}
		})

		// 格式化输出标签
		const handleLabel = computed(() => {
			return function (str: string) {
				if (str) {
					const startStr = str.split("|")
					let endStr = []
					for (let index = 0; index < startStr.length; index++) {
						endStr.push(startStr[index].split(",").join("/"))
					}
					return endStr
				}
				return []
			}
		})
		function handleFormRules(type: string){
			
			const endIf = course_function_list.value.find(item => item.value === type)
			console.log(endIf,"endIf9999999999999999");
			
			// alert(endIf.required)
			if (endIf){
				return endIf.required
			}
			else{
				return false
			}
			
		}

		// 新增、编辑配置
		const upsert = reactive<Upsert>({
			items: [
			
				{
					prop: "course_type",
					label: "课程类型",
					span: 12,
					component: {
						name: "courseType",
						// 调用这个组件的change事件
						onChange: async (id: any) => {
							refs.value.upsert.form.section_theme = null
							refs.value.upsert.form.phase_name = null
							// 通过refs获取子组件然后调用子组件的方法，实时调用接口
							await getCourseFunction(id)
							await updateCourseType()
							
							refs.value.phaseName.getSys(refs.value.upsert.form.course_type);
							console.log(refs.value,"refs=======");
							
							getCourseSourceByCourseType(id)
						},
						props: {
							placeholder: "请选择课程类型"
						}
					},
					rules: {
						required: true,
						message: "课程类型不能为空"
					}
				},
				{
					prop: "section_theme",
					label: "小节主题",
					span: 12,
					
					component: {
						name: "el-autocomplete",
            props: {
              placeholder: "请输入课程小节主题",
              fetchSuggestions: querySearch,
            },
						ref: setRefs("section_theme"),

						// name: "sectionTheme",
						// props: {
						// 	placeholder: "请输入课程小节主题",
						// }
					},
					rules: {
						required: true,
						message: "课程小节主题不能为空"
					}
				},
				// {
				// 	prop: "content_theme",
				// 	label: "内容大主题",
				// 	span: 12,
				// 	component: {
				// 		name: "el-input",
				// 		props: {
				// 			placeholder: "请输入内容大主题"
				// 		}
				// 	},
				// 	rules: {
				// 		required: true,
				// 		message: "内容大主题不能为空"
				// 	}
				// },
				

				{
					prop: "course_time",
					label: "课程用时",
					span: 12,
					value: "1.5H",
					component: {
						name: "el-select",
						options: course_timer_list.value,
						props: {
							placeholder: "请选择课程用时"
						}
					},
					rules: {
						required: true,
						message: "课程用时不能为空"
					}
				},
				// {
				// 	prop: "course_summary",
				// 	label: "课程学期",
				// 	span: 12,
				// 	component: {
				// 		name: "el-input",
				// 		props: {
				// 			placeholder: "请输入课程学期"
				// 		}
				// 	},
				// 	rules: {
				// 		required: true,
				// 		message: "课程学期不能为空"
				// 	}
				// },

				{
					prop: "isUse",
					label: "是否启用",
					span: 12,
					value: true,
					component: {
						name: "el-radio-group",
						options: [
							{
								label: "启用",
								value: true
							},
							{
								label: "未启用",
								value: false
							}
						]
					},
					rules: {
						required: true,
						message: "是否启用不能为空"
					}
				},
				{
					prop: "course_from",
					label: "课程来源",
					span: 24,
					value: "已有课程",
					component: {
						name: "el-input",
						props: {
							placeholder: "请输入课程来源"
						}
					},
					rules: {
						required: true,
						message: "课程来源不能为空"
					}
				},
				{
					prop: "teacher_experience",
					label: "上课经验",
					span: 24,
					component: {
						name: "el-input",
						props: {
							type: "textarea",
							placeholder: "请输入上课经验"
						}
					},
					rules: {
						required: true,
						message: "上课经验不能为空"
					}
				},
				{
					prop: "construct_level",
					label: "搭建难度",
					span: 12,
					ref: setRefs("construct_level"),
					hidden: ({ scope }) => {
						if (course_function_list.value.length === 0){
							return true
						}else{
							return course_function_list.value.find(item => item.value == "construct_level") === undefined
						}
					},
					component: {
						name: "el-rate",
						// options: course_level_list.value,
						props: {
							placeholder: "请选择搭建难度"
						}
					},
					rules: {
						required: false,
						message: "搭建难度不能为空"
					}
				},
				{
					prop: "phase_name",
					label: "课程大主题",
					span: 12,
					component: {
						name: "courseSystem",
						// options:course_phase_list.value,
						props: {
							placeholder: "请选择课程阶段",
							// 设置这个组件的引用
							ref: setRefs("phaseName")
						}
					},
					rules: {
						required: false,
						message: "课程阶段不能为空"
					}
				},
				{
					prop: "programming_level",
					label: "编程难度",
					span: 12,
					ref: setRefs("programming_level"),
					hidden: ({ scope }) => {
						if (course_function_list.value.length === 0){
							return true
						}else{
							return course_function_list.value.find(item => item.value == "programming_level") === undefined
						}
						
					},
					component: {
						name: "el-rate",
						// options: course_level_list.value,
						props: {
							placeholder: "请选择编程难度"
						}
					},
					rules: {
						required: false,
						message: "编程难度不能为空"
					}
				},
				
				// {
				// 	prop: "phase_name",
				// 	label: "课程阶段",
				// 	span: 12,
				// 	component: {
				// 		name: "el-select",
				// 		options:course_phase_list.value,
				// 		props: {
				// 			placeholder: "请选择课程阶段"
				// 		}
				// 	},
				// 	rules: {
				// 		required: true,
				// 		message: "课程阶段不能为空"
				// 	}
				// },
				{
					prop: "child_five_theme",
					label:{
						text: "幼儿主题",
						tip:"幼儿五大主题",
						icon: "el-icon-question",
					},
					ref: setRefs("child_five_theme"),

					// label: "幼儿五大主题",
					span: 12,
					// hidden: ({ scope }) => {
					// 	console.log(scope);

					// 	return !(scope.course_type === 4 || scope.course_type === 5);
					// },
					hidden: ({ scope }) => {
						if (course_function_list.value.length === 0){
							return true
						}else{
							return course_function_list.value.find(item => item.value == "child_five_theme") === undefined
						}
					
					},
					component: {
						name: "el-select",
						options: child_five_theme_list.value,
						props: {
							placeholder: "请选择幼儿五大主题"
						}
					},
					rules: {
						required: false,
						message: "幼儿五大主题不能为空"
					}
				},
				// {
				// 	prop: "phase_sort",
				// 	label: "课程排序",
				// 	span: 12,
				// 	value: 1,
				// 	component: {
				// 		name: "el-input-number"
				// 	},
				// 	rules: {
				// 		required: true,
				// 		message: "课程排序不能为空"
				// 	}
				// },
				// {
				// 	prop: "scientific",
				// 	label: "科学原理",
				// 	span: 12,
				// 	component: {
				// 		name: "el-input",
				// 		props: {
				// 			placeholder: "请输入科学原理"
				// 		}
				// 	},
				// 	rules: {
				// 		required: false,
				// 		message: "科学原理不能为空"
				// 	}
				// },
				// {
				// 	prop: "learning_goals",
				// 	label: "学习目标",
				// 	span: 24,
				// 	component: {
				// 		name: "el-input",
				// 		props: {
				// 			type: "textarea",
				// 			placeholder: "请输入学习目标"
				// 		}
				// 	},
				// 	rules: {
				// 		required: true,
				// 		message: "学习目标不能为空"
				// 	}
				// },
				
				{
					prop: "programming_goals",
					label: "编程目标",
					span: 24,
					ref: setRefs("programming_goals"),

					hidden: ({ scope }) => {
						if (course_function_list.value.length === 0){
							return true
						}else{
							return course_function_list.value.find(item => item.value == "programming_goals") === undefined
						}
						return course_function_list.value.indexOf("programming_goals") === -1
						// return !(scope.course_type === 4 || scope.course_type === 5);
					},
					component: {
						name: "el-input",
						props: {
							// type: "textarea",
							placeholder: "请输入编程目标"
						}
					},
					rules: {
						required: false,
						message: "编程目标不能为空"
					}
				},
				
				{
					prop: "emotional_goal",
					label: "情感目标",
					span: 24,
					ref: setRefs("emotional_goal"),
					hidden: ({ scope }) => {
						if (course_function_list.value.length === 0){
							return true
						}else{
							return course_function_list.value.find(item => item.value == "emotional_goal") === undefined
						}
						return course_function_list.value.indexOf("emotional_goal") === -1
						// return !(scope.course_type === 4 || scope.course_type === 5);
					},
					component: {
						name: "el-input",
						props: {
							// type: "textarea",
							placeholder: "请输入情感目标"
						}
					},
					rules: {
						required: false,
						message: "情感目标不能为空"
					}
				},
				{
					prop: "engineering_design_goals",
					label: "工程目标",
					span: 24,
					ref: setRefs("engineering_design_goals"),

					hidden: ({ scope }) => {
						if (course_function_list.value.length === 0){
							return true
						}else{
							return course_function_list.value.find(item => item.value == "engineering_design_goals") === undefined
						}
						return course_function_list.value.indexOf("engineering_design_goals") === -1
						// return !(scope.course_type === 4 || scope.course_type === 5);
					},
					component: {
						name: "el-input",
						props: {
							// type: "textarea",
							placeholder: "请输入工程目标"
						}
					},
					rules: {
						required: false,
						message: "工程目标不能为空"
					}
				},
				{
					prop: "science_goals",
					label: "科学目标",
					span: 24,
					ref: setRefs("science_goals"),

					hidden: ({ scope }) => {
						if (course_function_list.value.length === 0){
							return true
						}else{
							return course_function_list.value.find(item => item.value == "science_goals") === undefined
						}
						return course_function_list.value.indexOf("science_goals") === -1
						// return !(scope.course_type === 4 || scope.course_type === 5);
					},
					component: {
						name: "el-input",
						props: {
							// type: "textarea",
							placeholder: "请输入科学目标"
						}
					},
					rules: {
						required: false,
						message: "科学目标不能为空"
					}
				},
				
				{
					prop: "note",
					label: "总结文本",
					span: 24,
					component: {
						name: "el-input",
						props: {
							type: "textarea",
							placeholder: "请输入课程总结文本"
						}
					}
				},
				{
					prop: "content_label",
					label: "内容标签",
					span: 24,
					ref: setRefs("content_label"),

					hidden: ({ scope }) => {
						if (course_function_list.value.length === 0){
							return true
						}else{
							return course_function_list.value.find(item => item.value == "content_label") === undefined
						}
						return course_function_list.value.indexOf("content_label") === -1
						// return !(scope.course_type === 4 || scope.course_type === 5);
					},
					// collapse: true,
					hook: {
						bind: (value: string, form: any) => {
							// value 是与 prop 绑定的值
							// form 是表单值

							if (value) {
								let listOneLevel: any[] = []
								value.split("|").forEach((element: string) => {
									listOneLevel.push(element.split("/"))
								});
								return listOneLevel; // 结果为：[1, 2, 3]
							} else {
								return []
							}

						},
						submit: (value: any[]) => {
							if (value){
								let list: any[] = []
								if (value.length !== 0) {
									value.forEach((element: any[]) => {
										list.push(element.join("/"))
									});
									return list.join("|");
								}
								return ""
							}
							
							 // 结果为："1,2,3"
						}
					},
					component: {
						name: "contentLabel",
						props: {
							placeholder: "请选择内容标签"
						}
					},
					rules: {
						required: false,
						message: "内容标签不能为空"
					}
				},
				{
					prop: "program_design",
					label: "程序设计",
					span: 24,
					ref: setRefs("program_design"),

					hidden: ({ scope }) => {
						if (course_function_list.value.length === 0){
							return true
						}else{
							return course_function_list.value.find(item => item.value == "program_design") === undefined
						}
						return course_function_list.value.indexOf("program_design") === -1
						// return !(scope.course_type === 4 || scope.course_type === 5);
					},
					// collapse: true,
					hook: {
						bind: (value: string, form: any) => {
							// value 是与 prop 绑定的值
							// form 是表单值

							if (value) {
								let listOneLevel: any[] = []
								value.split("|").forEach((element: string) => {
									listOneLevel.push(element.split("/"))
								});
								return listOneLevel; // 结果为：[1, 2, 3]
							} else {
								return []
							}

						},
						submit: (value: any[]) => {
							if (value){
								let list: any[] = []
								if (value.length !== 0) {
									value.forEach((element: any[]) => {
										list.push(element.join("/"))
									});
									return list.join("|");
								}
								return ""
							}
							
							 // 结果为："1,2,3"
						}
					},
					component: {
						name: "programDesign",
						props: {
							placeholder: "请选择程序设计"
						}
					},
					rules: {
						required: false,
						message: "程序设计不能为空"
					}
				},
				{
					prop: "mechanical",
					label: "机械原理",
					span: 24,
					ref: setRefs("mechanical"),

					hidden: ({ scope }) => {
						if (course_function_list.value.length === 0){
							return true
						}else{
							return course_function_list.value.find(item => item.value == "mechanical") === undefined
						}
						return course_function_list.value.indexOf("mechanical") === -1
						// return !(scope.course_type === 4 || scope.course_type === 5);
					},
					// collapse: true,
					hook: {
						bind: (value: string, form: any) => {
							// value 是与 prop 绑定的值
							// form 是表单值

							if (value) {
								let listOneLevel: any[] = []
								value.split("|").forEach((element: string) => {
									listOneLevel.push(element.split("/"))
								});
								return listOneLevel; // 结果为：[1, 2, 3]
							} else {
								return []
							}

						},
						submit: (value: any[]) => {
							if (value){
								let list: any[] = []
								if (value.length !== 0) {
									value.forEach((element: any[]) => {
										list.push(element.join("/"))
									});
									return list.join("|");
								}
								return ""

							}
							
							 // 结果为："1,2,3"
						}
					},
					component: {
						name: "mechanical",
						props: {
							placeholder: "请选择机械原理"
						}
					},
					rules: {
						required: false,
						message: "机械原理不能为空"
					}
				},
				{
					prop: "course_shape",
					label: "课程造型",
					span: 24,
					ref: setRefs("course_shape"),

					hidden: ({ scope }) => {
						if (course_function_list.value.length === 0){
							return true
						}else{
							return course_function_list.value.find(item => item.value == "course_shape") === undefined
						}
						return course_function_list.value.indexOf("course_shape") === -1
						// return !(scope.course_type === 4 || scope.course_type === 5);
					},
					// collapse: true,
					hook: {
						bind: (value: string, form: any) => {
							// value 是与 prop 绑定的值
							// form 是表单值
							
							if (value) {
								let listOneLevel: any[] = []
								value.split("|").forEach((element: string) => {
									listOneLevel.push(element.split("/"))
								});
								return listOneLevel; // 结果为：[1, 2, 3]
							} else {
								return []
							}

						},
						submit: (value: any[]) => {
							if (value){
								let list: any[] = []
								if (value.length !== 0) {
									value.forEach((element: any[]) => {
										list.push(element.join("/"))
									});
									return list.join("|");
								}
								return ""
							}
							 // 结果为："1,2,3"
						}
					},
					component: {
						name: "courseShape",
						props: {
							placeholder: "请输入课程造型"
						}
					},
					rules: {
						required: false,
						message: "课程造型不能为空"
					}
				},
				{
					prop: "file",
					label: "文件",
					span: 24,
					ref: setRefs("file"),
					hidden: ({ scope }) => {
						if (course_function_list.value.length === 0){
							return true
						}else{
							return course_function_list.value.find(item => item.value == "file") === undefined
						}
						return course_function_list.value.indexOf("course_shape") === -1
						// return !(scope.course_type === 4 || scope.course_type === 5);
					},
					// hook: {
					// 	bind: ["split"], // 绑定通道流程，分割 -> 转成number -> 绑定值
					// 	// submit: ["join"] // 提交通道流程，逗号拼接 -> 提交
					// },
					component: {
						// name: "slot-file"
						name: "cl-upload",
						props: {
							name: "file",
							// type:'text',
							multiple: true,
							rename: false,
							accept: "*",
							showButton: true,
							listType: "text",
							limitSize: 50,
							data: { name: "name" },
							showFileList: true
						}
					},
					rules: {
						required: false,
						message: "文件不能为空"
					}
				}
			]
		});

		// 表格配置
		const table = reactive<Table>({
			columns: [
				{
					type: "selection",
					width: 60
				},
				{
					type: "index",
					label: "#",
					width: 60,
				},
				{
					prop: "lable",
					type: "expand",
					label: "更多内容",
					width: 80,
				},
				{
					prop: "section_theme",
					label: "课程主题",
					// width: 190,
				},
				{
					prop: "phase_name",
					label: "课程大主题",
					width: 190,
					dict: course_phase_list.value
				},
				{
					prop: "level",
					label: "课程难度",
					width: 90,
					dict: course_level_list.value
				},
				// {
				// 	prop: "content_integrity",
				// 	label: "内容完整度"
				// },
				{
					prop: "course_type",
					label: "课程类型",
					dict: course_type.value,
					width: 160
				},
				{
					prop: "isUse",
					label: "是否启用",
					width: 70,
					dict: [
						{
							value: true,
							label: "启用",
							type: "warning"
						},
						{
							value: false,
							label: "停用",
							type: "info"
						}
					]
				},
				// {
				// 	prop: "program_design",
				// 	label: "程序设计"
				// },
				// {
				// 	prop: "mechanical",
				// 	label: "机械原理"
				// },
				// {
				// 	prop: "course_shape",
				// 	label: "课程造型"
				// },
				// {
				// 	prop: "file",
				// 	label: "下载文件",
				// 	width: 80
				// },
				{
					label: "操作",
					type: "op",
					width: 90
				}
			]
		});

	

		// crud 加载
		function onLoad({ ctx, app }: CrudLoad) {
			// 绑定 service
			ctx.service(service.courseSourceService).done();
			app.refresh({ ...form.value });
		}

		const splitUrl = computed(() => {
			return function (info: string) {
				if (info) {
					// console.log('info',info);

					// let urlList = info.split(",");

					// let endList =  urlList.map((url) => {
					// 	// alert(url)
					// 	return {
					// 		url:url,
					// 		name: basename(url),
					// 	};
					// });

					// return endList
					return info.split(",")
				} else {
					return [];
				}
			};
		});

		// onMounted(()=>{
		// 	getCourseFunction()
		// })

		const handleLabelSys = computed(()=>{
			return function (data: any,label: any){
				console.log(data);
				
				console.log(course_function_list.value.find(item => item.value === label));
				const end = course_function_list.value.find(item => item.value == label) !== undefined
				return end
			}
		})

		// 行点击展开
		function onRowClick(row: any, column: any) {
			if (column.property && row.children) {
				refs.value.table.toggleRowExpansion(row);
			}
			console.log(row,"row-------");
			console.log(column,"column-------");
			
		}

	 async	function handledetail(row: any,expandedRows: any){
			// course_function_list.value.find(item => item.value === type)
			console.log(expandedRows,"expandedRows==============");
			if (expandedRows.length !==0){
				await	getCourseFunction(row.course_type)
				console.log(course_function_list.value,'点击打开某条的data数据（props）');
			}
		 	
			// console.log(row,'点击打开某条的data数据（props）');
		}
		const handleLabelRequied = computed(()=>{
			return function(str){
				if (str.required){
					return "*"+str.label
				}
				return str.label
			}
		})

		return {
			refs,
			setRefs,
			upsert,
			table,
			onLoad,
			course_phase_list,
			onUpsertOpen,
			course_type,
			course_level_list,
			fileStr,
			// 筛选
			form,
			searchSubmit,
			searchSubmitCourseType,
			resetSerach,
			handleStrSplite,
			handleLineSplite,
			aaa,
			splitUrl,
			findFileName,
			handleColumn,
			handleLabel,
			getCourseFunction,
			course_function_list,
			handleLabelSys,
			onRowClick,
			handledetail,
			handleLabelRequied,
			splitFileName,
			handleContentIntegrity
		};
	}
});
</script>

<style>
.descriptions_label {
	width: 100px;
}
.el-form-item--small .el-form-item__content{
	margin: auto;
}
.el-descriptions__body .el-descriptions__table .el-descriptions__cell.is-right {
	width:200px !important;
}
</style>
